<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Maintenance</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,500italic,700,400" rel="stylesheet">
    <style>
        body {
            background-color: #444;
            color: #fff;
            font-size: 16px;
            font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
            line-height: 24px;
            margin: 0;
            padding: 0;
            text-align: center;
            -webkit-font-smoothing: antialiased;
            -webkit-text-size-adjust: 100%;
        }

        h1 {
            font-size: 48px;
            font-weight: bold;
            line-height: 52px;
            margin: 24px 0 0;
            padding: 0;
        }

        h2 {
            color: #bbb;
            font-size: 22px;
            font-weight: normal;
            line-height: 30px;
            margin: 16px 0 0;
            padding: 0;
        }

        .message {
            margin: 120px 0 0;
        }

        .logo {
            animation: spin 5s infinite linear;
        }

        @keyframes spin {
            0% {
                transform: scaleX(1);
            }
            50% {
                transform: scaleX(-1);
            }
            100% {
                transform: scaleX(1);
            }
        }
    </style>
</head>
<body>

<div class="message">
    <img src="logo.png" class="logo" width="136" height="120" alt="">
    <h1>Service is under maintenance</h1>
    <h2>We will come back soon.</h2>
</div>

</body>
</html>
